<template>
    <div class="showCase">
        <div style="width: 95%;height: 90%;background-color: darkgrey;border-radius: 20px">
            <!-- 标题，在售商品 -->
            <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;background-color: gainsboro;border-radius: 20px 20px 0 0 ">
                <h3>
                    <span class="el-icon-loading" style="color: blue"></span>
                    &nbsp; 在售商品 &nbsp;
                    <span class="el-icon-loading" style="color: blue"></span>
                </h3>
            </div>

            <!-- 商品展示区 -->
            <div style="width: 100%;height:80%;padding-left: 10px;padding-right: 10px;background-color: deepskyblue">
                <div style="width: 100%;height: 100%;background-color: darkgrey;overflow: auto">
                    <el-row style="width: 100%;height: 100%">


                        <!-- 整体 -->
                        <el-col :sm="8" :xs="12" style="height: 50%;padding:5px 10px 5px 10px" v-for="(drink,index) in drinkList" :key="drink.name">
                            <div style="width: 100%;height: 100%;position: relative">

                                <div style="width: 100%;height: 100%;background-color: gainsboro;position:absolute;opacity: 0.6;"
                                     v-if="drink.remain<=0"
                                >
                                    <img style="width: 100%;height: 100%" :src="require('@/assets/drinks/已售空.jpg')">
                                </div>

                                <!-- 图片部分 -->
                                <div style="width: 100%;height: 80%;">
                                    <img style="width: 100%;height: 100%" :src="require('@/assets/drinks/'+testImg(drink)+'.jpg')">
                                </div>
                                <!-- 控件部分 -->
                                <div style="width: 100%;height: 20%;background-color: skyblue;display: flex;justify-content: center;align-items: center;padding: 5px">
                                    <el-button size="small" class="showCaseBtns"><strong><i>{{drink.name}}</i></strong></el-button>
                                    <el-button type="danger" size="small" class="showCaseBtns" circle @click="addInCart(index,drink)" :disabled="drink.clicked">
                                        <span class="el-icon-plus"></span>
                                    </el-button>
                                    <el-button type="primary" size="small" class="showCaseBtns">{{drink.price}}元</el-button>
                                </div>
                            </div>
                        </el-col>


                    </el-row>
                </div>
            </div>

            <!-- 支付按钮区 -->
            <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;background-color: gainsboro;border-radius: 0 0 20px 20px">
                <el-button type="success" @click="toPaying" :disabled="cartList.length<=0" size="medium">
                    我已选好 <span class="el-icon-caret-right"></span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Showcase",
        data(){
            return{
                drinkList:this.$store.state.drinks,
                cartList:this.$store.state.cart,
                nameList:[]
            }
        },
        created() {
            this.nameList = require("@/assets/json/exists.json").nameList
        },
        methods:{
            addInCart(index,drink){
                drink.clicked = true
                var newItem = {}
                newItem.name = drink.name
                newItem.count = 1
                newItem.remain = drink.remain
                newItem.index = index
                newItem.price = drink.price
                newItem.temperature = '加热'
                this.cartList.push(newItem)
                this.$message({
                    message: '添加购物车成功！',
                    type: 'success',
                    offset:240,
                    duration:1000
                });
            },
            toPaying(){
                this.$router.push('/paying')
            },
            testImg(drink){
                if(this.nameList.indexOf(drink.name)!=-1){
                    return drink.name
                }else if(drink.id <9 ){
                    return this.$store.state.nameRecord[drink.id]
                }else {
                    return '默认果汁'
                }
            }
        }
    }
</script>

<style scoped>
    .showCase{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .showCaseBtns{
        flex-grow: 1
    }

    @media screen and (max-width: 768px) {
        .showCaseBtns{
            flex-grow: 1;
            padding: 5px;
        }
    }
</style>